/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable no-restricted-globals */
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import React, { useState } from 'react';
import { getOrder, GetOrderParamsType } from '@/services/order';
import { connect, CurrentUser, Dispatch } from 'umi';
import { ConnectState } from '@/models/connect';
import { Tag } from 'antd';

interface OrderProps {
  dispatch: Dispatch;
  userState?: CurrentUser;
}

interface OrderItem {
  order_type: string; // 订单类型
  order_no: string; // 订单编号
  device_id: string; // 设备编号
  sname: string;
  start_time: string;
  end_time: string;
  rental_location: string;
  return_location: string;
  amount: string;
}

// 订单管理
const OrderList: React.FC<OrderProps> = (props) => {
  const { userState } = props;
  const [page, setPage] = useState(1); // 设置页数
  const [limit, setLimit] = useState(20); // 设置数据读取数
  const [total, setTotal] = useState(0); // 设置数据总数
  const [select, setSelect] = useState(""); // 选择商户
  const [startTime, setStartTime] = useState(""); // 开始时间
  const [endTime, setEndTime] = useState(""); // 结束时间

  // 表格配置
  const columns: ProColumns<OrderItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
      hideInTable: true,
      search: false,
    },
    {
      title: '订单类型',
      dataIndex: 'order_type',
      search: false,
      render: (_, row) => {
        if ((row as any).order_type == 1) {
          // 充电宝
          return <Tag color="blue" key={name}>充电宝</Tag>
        } 
          return <Tag color="cyan" key={name}>充电线</Tag>
        
      }
    },
    {
      title: '状态',
      search: false,
      dataIndex: 'status',
      valueEnum: {
        1: { text: '租借中', status: 'Processing' },
        2: { text: '已完成', status: 'Success' },
        3: { text: '订单超时', status: 'Error' },
      },
    },
    {
      title: '查找',
      valueType: 'textarea',
      dataIndex: 'select',
      hideInTable: true,
      hideInForm: true,
      tooltip: "(订单编号/设备编号/商户名称)查找"
    },
    {
      title: '订单编号',
      dataIndex: 'order_no',
      valueType: 'textarea',
      search: false,
      copyable: true,
    },
    {
      title: '设备编号',
      dataIndex: 'device_id',
      search: false,
      copyable: true,
    },
    {
      title: '商户名称',
      dataIndex: 'sname',
      search: false,
      copyable: true,
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
      valueType: 'date'
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      valueType: 'date',
    },
    {
      title: '租借地点',
      search: false,
      dataIndex: 'rental_location',
    },
    {
      title: '归还地点',
      search: false,
      dataIndex: 'return_location',
    },
    {
      title: '收益',
      search: false,
      dataIndex: 'amount',
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="订单管理"
        onReset={() => { setPage(1) }}
        request={async () => {
          const data: GetOrderParamsType = {
            uId: userState?.id!,
            userType: userState?.user_type!,
            token: userState?.token!,
            select,
            startTime,
            endTime,
            page,
            limit,
          };
          return getOrder(data);
        }}
        postData={(res) => {
          // console.log(res);
          setTotal((res as any).count);
          return (res as any).data;
        }}
        beforeSearchSubmit={(params: any) => {
          // 查找
          if (params.select) {
            setSelect(params.select);
          } else {
            setSelect("");
          }
          // 开始时间
          if (params.start_time) {
            setStartTime(`${params.start_time  } 00:00:00`);
          } else {
            setStartTime("");
          }
          // 结束时间
          if (params.end_time) {
            setEndTime(`${params.start_time  } 23:59:59`);
          } else {
            setEndTime("");
          }
          return params;
        }}
        pagination={{
          pageSize: limit,
          total,
          onChange: (page) => {
            setPage(page);
          },
          onShowSizeChange: (_, size) => {
            setLimit(size);
          },
        }}
        columns={columns}
      ></ProTable>
    </PageContainer>
  );
};

export default connect(({ user }: ConnectState) => ({ userState: user.currentUser }))(OrderList);
